<template>
  <div>
    <el-card>
      <div
        style="
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 600;
          margin-bottom: 10px;
        ">
        {{ title }}
      </div>
      <el-row :gutter="20" style="opacity: 0">
        <!--查询-->
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
          v-show="showSearch"
          label-width="68px">
          <el-form-item :label="$t('月份')" prop="distrName">
            <el-select @change="getList" clearable style="width: 150px" v-model="queryParams.expired">
              <el-option label="一个月" :value="1" />
              <el-option label="二个月" :value="2" />
              <el-option label="三个月" :value="3" />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <el-table :height="calTableHeight() - 150" v-loading="loading" ref="TableRef" :data="tableData">
        <el-table-column show-overflow-tooltip :label="$t('sku')" align="center" prop="skuNo" width="120">
          <template slot-scope="{ row }">
            <span style="color: blue; cursor: pointer" @click="handleEdits(row)">{{ row.skuNo }}</span>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip :label="$t('商品名称')" align="center" prop="skuNameCn" />
        <el-table-column show-overflow-tooltip :label="$t('数量')" align="center" prop="serializableNum" width="50">
          <template slot-scope="{ row }">
            <span style="font-weight: bold; cursor: pointer; color: #1890ff" @click="handleNum(row)">{{
              row.serializableNum
            }}</span>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip :label="$t('过期日期')" align="center" prop="expiredTime">
          <template slot-scope="{ row }">
            <span>{{ row.expiredTime ? row.expiredTime.split(' ')[0] : '' }}</span>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip :label="$t('库位编号')" align="center" prop="spNo" width="120" />
      </el-table>

      <pagination
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </el-card>
    <!-- sku详情/修改 -->
    <Skucontmoduler @relaod="getList" ref="Skucontmoduler" />

    <!-- 数量 -->
    <Num
      :show.sync="num.show"
      :formData="num.formData"
      :query="{ ...query, ...queryParams }"
      :type="{
        type: 3,
        expired: queryParams.expired,
      }" />
  </div>
</template>

<script>
import { getExpiredRecentList } from '@/api/distribution/sku/inventoryExpirationList'
import Skucontmoduler from '@/components/Skucontmoduler'
import Num from './num.vue'

export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  components: {
    Skucontmoduler,
    Num,
  },
  props: {
    /**
     * title
     */
    title: {
      type: String,
      default: '',
    },
    /**
     * query
     */
    query: {
      type: Object,
      default: {},
    },
    /**
     * formData
     */
    formData: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      showSearch: true,
      loading: false,
      tableData: [],
      queryParams: {
        // expired: 1,
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      num: {
        show: false,
        formData: {},
      },
    }
  },
  computed: {},

  created() {
    this.getList()
  },
  methods: {
    handleEdits(row) {
      this.$refs.Skucontmoduler.setSkuInfo(row)
      this.$refs.Skucontmoduler.checkNumber('packingInformation')
    },
    handleNum(row) {
      this.num.formData = row
      this.num.show = true
    },
    getList() {
      this.loading = true
      getExpiredRecentList({
        ...this.query,
        ...this.queryParams,
      })
        .then((res) => {
          const { code, rows, total } = res
          if (code === 200) {
            console.log(`res ==>`, JSON.parse(JSON.stringify(res)))
            this.tableData = rows
            this.total = total
          }
        })
        .finally(() => (this.loading = false))
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      Object.keys(this.queryParams).forEach((key) => {
        this.queryParams[key] = ''
      })
      this.queryParams.pageSize = 10
      this.queryParams.pageNum = 1
      this.getList()
    },
  },
}
</script>
<style scoped lang="scss"></style>
